<template>
  <div class="playlist" @click.self="ListState">
    <transition appear enter-active-class="animate__animated animate__fadeInUp" leave-active-class="animate__animated animate__fadeOutDown">
      <div class="content" v-if="show" @animationend="animationend">
        <div class="head">
          <div class="play_type">
            <svg
              t="1613891538400"
              class="icon"
              viewBox="0 0 1146 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5263"
              width="20"
              height="20"
              v-if="playmodel"
            >
              <path
                d="M1130.61809 259.901795 954.01552 437.13724C935.722387 455.490647 906.067621 455.490647 887.774488 437.13724 869.511492 418.783833 869.511492 389.00852 887.774488 370.655113L987.527816 270.540141 45.205436 270.540141C20.252035 270.540141 0 250.318242 0 225.364842 0 200.381304 20.252035 180.159406 45.205436 180.159406L987.527816 180.159406 887.774488 80.044434C869.511492 61.691027 869.511492 31.94585 887.774488 13.562306 906.067621-4.791101 935.722387-4.791101 954.01552 13.562306L1130.61809 190.827889C1132.667403 192.877202 1133.631785 195.46898 1135.229044 197.759389 1136.494796 199.356647 1137.519453 201.074454 1138.574246 202.822398 1139.478355 204.600478 1140.563286 206.197737 1141.226299 208.036091 1143.546844 213.40047 1145.204377 219.096354 1145.204377 225.364842 1145.204377 232.025109 1143.576981 238.233322 1140.985203 243.929207 1138.724931 249.74564 1135.319455 255.200429 1130.61809 259.901795ZM45.205436 752.761594 987.527816 752.761594 887.774488 652.646622C869.511492 634.293215 869.511492 604.517901 887.774488 586.194631 906.067621 567.841224 935.722387 567.841224 954.01552 586.194631L1130.61809 763.430077C1132.667403 765.47939 1133.631785 768.071168 1135.229044 770.361577 1136.494796 771.958836 1137.489316 773.676642 1138.544109 775.424586 1139.448218 777.17253 1140.563286 778.799925 1141.226299 780.63828 1143.546844 786.002658 1145.204377 791.698543 1145.204377 797.96703 1145.204377 804.627298 1143.576981 810.835511 1140.985203 816.531396 1138.694794 822.347828 1135.319455 827.802618 1130.61809 832.503983L954.01552 1009.739429C935.722387 1028.092836 906.067621 1028.092836 887.774488 1009.739429 869.511492 991.386022 869.511492 961.640845 887.774488 943.257301L987.527816 843.172466 45.205436 843.172466C20.252035 843.172466 0 822.920431 0 797.96703 0 772.983492 20.252035 752.761594 45.205436 752.761594Z"
                p-id="5264"
                fill="#999999"
              ></path>
            </svg>
            <svg
            t="1614141787800"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2188"
            width="20"
            height="20"
            v-else
          >
            <path
              d="M430.506667 533.333333c4.693333-11.733333 9.173333-23.466667 12.8-35.84a53.12 53.12 0 0 1 2.346666-6.186666A309.333333 309.333333 0 0 1 725.333333 280.746667v66.56a30.506667 30.506667 0 0 0 48.213334 25.173333l130.773333-91.306667a30.72 30.72 0 0 0 0-50.346666l-130.773333-91.306667A30.506667 30.506667 0 0 0 725.333333 164.693333v52.053334a372.053333 372.053333 0 0 0-303.573333 176c-3.413333 5.546667-6.613333 11.306667-9.813333 16.853333a322.56 322.56 0 0 0-16.853334 34.56l-1.92 4.693333a336.426667 336.426667 0 0 0-12.8 35.626667A309.973333 309.973333 0 0 1 114.133333 700.373333a32 32 0 0 0 5.973334 64 372.693333 372.693333 0 0 0 282.24-174.933333c3.413333-5.546667 6.4-11.093333 9.6-16.64a346.453333 346.453333 0 0 0 16.64-34.773333z"
              p-id="2189"
              fill="#999999"
            ></path>
            <path
              d="M114.133333 281.6a309.546667 309.546667 0 0 1 251.733334 178.773333 379.306667 379.306667 0 0 1 33.706666-71.68 372.906667 372.906667 0 0 0-279.466666-170.666666A32 32 0 0 0 85.333333 250.026667a31.786667 31.786667 0 0 0 28.8 31.573333zM904.106667 700.16l-130.56-91.306667A30.506667 30.506667 0 0 0 725.333333 634.026667v67.2a309.546667 309.546667 0 0 1-267.52-179.626667 411.946667 411.946667 0 0 1-33.28 71.68A372.266667 372.266667 0 0 0 725.333333 765.226667v51.413333a30.506667 30.506667 0 0 0 48.213334 25.173333l130.773333-91.306666a30.72 30.72 0 0 0-0.213333-50.346667z"
              p-id="2190"
              fill="#999999"
            ></path>
          </svg>
            <span> ({{playmodel? '顺序播放 ':'随机播放 '+ currentList.length }})</span>
          </div>
          <div class="clear">
            <svg
              t="1613891818584"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6078"
              width="20"
              height="20"
              @click="clearList"
            >
              <path
                d="M944 192H755.2v-44.8c0-54.4-44.8-99.2-99.2-99.2H361.6c-54.4 0-99.2 44.8-99.2 99.2V192H83.2c-12.8 0-25.6 9.6-25.6 25.6 0 12.8 9.6 25.6 25.6 25.6H144v633.6c0 54.4 44.8 99.2 99.2 99.2h550.4c54.4 0 99.2-44.8 99.2-99.2V243.2H944c12.8 0 25.6-9.6 25.6-25.6-3.2-12.8-9.6-25.6-25.6-25.6z m-627.2-44.8c0-25.6 22.4-48 48-48h294.4c25.6 0 48 22.4 48 48V192H316.8v-44.8z m524.8 720c0 28.8-16 57.6-41.6 57.6H249.6c-25.6 0-54.4-19.2-54.4-44.8l3.2-636.8h643.2v624z"
                p-id="6079"
                fill="#999999"
              ></path>
              <path
                d="M368 380.8c-16 0-25.6 9.6-25.6 25.6v342.4c0 16 12.8 25.6 25.6 25.6s25.6-9.6 25.6-25.6V406.4c-3.2-12.8-9.6-25.6-25.6-25.6zM528 380.8c-16 0-25.6 9.6-25.6 25.6v342.4c0 16 12.8 25.6 25.6 25.6s25.6-9.6 25.6-25.6V406.4c-3.2-12.8-9.6-25.6-25.6-25.6zM688 380.8c-16 0-25.6 9.6-25.6 25.6v342.4c0 16 12.8 25.6 25.6 25.6s25.6-9.6 25.6-25.6V406.4c-3.2-12.8-9.6-25.6-25.6-25.6z"
                p-id="6080"
                fill="#999999"
              ></path>
            </svg>
          </div>
        </div>
        <ul class="song">
          <CurrentSongItem v-for="item in currentList" :key="item.id" :item="item"></CurrentSongItem>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapState } from "vuex";
import CurrentSongItem from '@/components/CurrentSongItem'
export default {
  components:{
    CurrentSongItem
  },
  computed: {
    ...mapState({
      currentList: (state) => state.play.currentList,
      List_state: (state) => state.play.List_state,
      playmodel: (state) => state.playmodel,
    }),
  },
  data(){
    return {
      show:true,
    }
  },
  methods: {
    ListState() {
      this.show = false;
    },
    clearList(){
      this.$store.state.play.currentList = [];
    },
    animationend(){
      if(!this.show){
        this.$store.state.play.List_state = !this.List_state;
      }
    }
  },
};
</script>

<style lang="less">
.animate__animated.animate__fadeOutDown{
    --animate-duration:0.6s !important;
  }
.playlist {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  
  .content {
    width: 100%;
    height: 50vh;
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 50%;
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    
    .head {
      width: 100%;
      padding: 25px 10px 0;
      position: sticky;
      top: 0px;
      left: 0;
      height: 65px;
      border-bottom: 1px solid #f0f0f0;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      .play_type {
        .icon {
          vertical-align: -3px;
          margin-right: 8px;
        }
      }
      .clear{
        &::before{
          content: "";
          display: inline-block;
          width: 1px;
          height: 25px;
          margin-right: 10px;
          background-color: #ccc;
        }
        .icon{
          vertical-align: 3px;
        }
      }
    }
    .song{
      width: 100%;
      padding: 0 10px;
      
    }
  }
}
</style>